<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浏览器信息检测工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">浏览器信息检测工具</h1>
        <p>使用本工具可以检测访问者的浏览器的屏幕尺寸、像素比例、显示密度、浏览器特性（CSS3特性支持、H5/JS特性支持）、User Agent以及其它常用和不常用的信息。</p>
        <table class="table table-striped mt-4">
            <tbody>
                <tr>
                    <th>属性名称</th>
                    <th>属性值</th>
                </tr>
                <tr>
                    <td>浏览器</td>
                    <td><span id="browserType"></span></td>
                </tr>
                <tr>
                    <td>内核</td>
                    <td><span id="browserKernel"></span></td>
                </tr>
                <tr>
                    <td>User Agent</td>
                    <td><span id="userAgent"></span></td>
                </tr>
                <tr>
                    <td>屏幕尺寸</td>
                    <td><span id="screenSize"></span></td>
                </tr>
                <tr>
                    <td>像素比例</td>
                    <td><span id="pixelRatio"></span></td>
                </tr>
                <tr>
                    <td>显示密度</td>
                    <td><span id="density"></span></td>
                </tr>
                <tr>
                    <td>CSS3特性支持</td>
                    <td><span id="css3"></span></td>
                </tr>
                <tr>
                    <td>H5/JS特性支持</td>
                    <td><span id="h5js"></span></td>
                </tr>
                <tr>
                    <td>设备内存大小</td>
                    <td><span id="deviceMemory"></span></td>
                </tr>
                <tr>
                    <td>页面内存使用情况</td>
                    <td><span id="memory"></span></td>
                </tr>
                <tr>
                    <td>CPU核心数量</td>
                    <td><span id="cpuCoreCount"></span></td>
                </tr>
                <tr>
                    <td>触摸点数量上限</td>
                    <td><span id="maxTouchPoints"></span></td>
                </tr>
                <tr>
                    <td>网络连接类型</td>
                    <td><span id="effectiveType"></span></td>
                </tr>
                <tr>
                    <td>下载速度估计</td>
                    <td><span id="downlink"></span></td>
                </tr>
                <tr>
                    <td>往返时延估计</td>
                    <td><span id="rtt"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 获取屏幕尺寸、像素比例、显示密度等信息
        const screenWidth = window.screen.width;
        const screenHeight = window.screen.height;
        const pixelRatio = window.devicePixelRatio;
        const density = Math.round(screenWidth / window.innerWidth * 100) / 100; // 屏幕密度=屏幕宽度/CSS像素
        // 显示屏幕尺寸、像素比例、显示密度等信息
        document.getElementById("screenSize").innerHTML = `${screenWidth}×${screenHeight}px`;
        document.getElementById("pixelRatio").innerHTML = pixelRatio;
        document.getElementById("density").innerHTML = density;

        // 检测CSS3和H5/JS特性支持情况
        const css3Support = 'transition' in document.documentElement.style && 'flex' in document.documentElement.style && 'transform' in document.documentElement.style;
        const h5jsSupport = (typeof FileReader !== 'undefined') && (typeof FormData !== 'undefined') && (typeof WebSocket !== 'undefined') && ('speechSynthesis' in window);

        // 显示CSS3和H5/JS特性支持情况
        document.getElementById("css3").innerHTML = css3Support ? "支持" : "不支持";
        document.getElementById("h5js").innerHTML = h5jsSupport ? "支持" : "不支持";

        // 显示User Agent信息
        const userAgent = navigator.userAgent;
        document.getElementById("userAgent").innerHTML = userAgent;


        // 判断浏览器类型
        let browserType = "";
        if (userAgent.indexOf("Chrome") !== -1) {
            browserType = "Chrome";
        } else if (userAgent.indexOf("Firefox") !== -1) {
            browserType = "Firefox";
        } else if (userAgent.indexOf("Safari") !== -1) {
            browserType = "Safari";
        } else if (userAgent.indexOf("Edge") !== -1) {
            browserType = "Edge";
        } else {
            browserType = "Unknown";
        }

        // 判断浏览器内核
        let browserKernel = "";
        if (userAgent.indexOf("Trident") !== -1 || userAgent.indexOf("MSIE") !== -1) {
            browserKernel = "Trident";
        } else if (userAgent.indexOf("Edge") !== -1) {
            browserKernel = "EdgeHTML";
        } else if (userAgent.indexOf("AppleWebKit") !== -1) {
            browserKernel = "Blink(WebKit)";
        } else if (userAgent.indexOf("Gecko") !== -1 && userAgent.indexOf("KHTML") === -1) {
            browserKernel = "Gecko";
        } else {
            browserKernel = "Unknown";
        }

        // 显示浏览器和浏览器内核信息
        document.getElementById("browserType").innerHTML = browserType;
        document.getElementById("browserKernel").innerHTML = browserKernel;

        // 显示设备内存大小（仅Chrome和Firefox支持）
        if (window.navigator.deviceMemory) {
            document.getElementById("deviceMemory").innerHTML = `${window.navigator.deviceMemory}GB`;
        } else {
            document.getElementById("deviceMemory").innerHTML = "不支持";
        }

        // 显示页面内存使用情况
        if (window.performance.memory) {
            const memoryUsage = window.performance.memory.usedJSHeapSize / 1024 / 1024; // 转换为MB单位
            document.getElementById("memory").innerHTML = `${memoryUsage.toFixed(2)}MB`;
        } else {
            document.getElementById("memory").innerHTML = "不支持";
        }

        // 显示CPU核心数量
        document.getElementById("cpuCoreCount").innerHTML = navigator.hardwareConcurrency;

        // 显示触摸点数量上限
        document.getElementById("maxTouchPoints").innerHTML = navigator.maxTouchPoints || "不支持";

        // 显示网络连接类型、下载速度估计、往返时延估计
        if (navigator.connection) {
            document.getElementById("effectiveType").innerHTML = navigator.connection.effectiveType;
            document.getElementById("downlink").innerHTML = `${navigator.connection.downlink}Mbps`;
            document.getElementById("rtt").innerHTML = `${navigator.connection.rtt}ms`;
        } else {
            document.getElementById("effectiveType").innerHTML = "不支持";
            document.getElementById("downlink").innerHTML = "不支持";
            document.getElementById("rtt").innerHTML = "不支持";
        }

    </script>
</body>

</html>